import { ArrowLeftOutlined, CheckOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row } from 'antd';
import 'antd/dist/antd.css';
import React from 'react';
import http from '../common/http';

class TypeItemForm extends React.Component {

    constructor(props) {
        super(props)
    }

    handleSubmit = (e) => {
        e.preventDefault()
        this.props.form.validateFields()
            .then(values => {
                const obj = { id: this.props.typeId, ...values }
                http.post("/api/note/type/save", obj)
                    .then(res => {
                        this.props.onClose(true)
                    })
            })
            .catch(err => console.info("err"))
    }

    render() {
        // const { getFieldDecorator } = this.props.form
        return (
            <div>
                <div style={{
                    position: 'absolute',
                    left: 0,
                    bottom: 0,
                    width: '100%',
                    borderTop: '1px solid #e9e9e9',
                    padding: '10px 16px',
                    background: '#fff',
                    textAlign: 'right',
                }}>
                    <Button onClick={this.props.onClose} style={{ marginRight: 8 }}> <ArrowLeftOutlined /> 取消 </Button>
                    <Button onClick={this.handleSubmit} type="primary"> <CheckOutlined /> 提交 </Button>
                </div>
                <Form form={this.props.form} layout="vertical" hideRequiredMark initialValues={{ name: this.props.typeName }}>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item name="name" label="分类名" rules={[{ required: true, message: '请输入分类名' }]}>
                                <Input placeholder="请输入分类名" />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>
        )
    }
}

// export default TypeItemForm
function WithNavigate(props) {
    let [form] = Form.useForm();
    return <TypeItemForm {...props} form={form} />
}
export default WithNavigate